<template>
  <div class="steps-custom">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step v-for="(item, index) in labelLsit" :key="index" :title="item.label" :icon="item.icon" :status="item.processStatus">
        <template slot="title">
          <!-- 存在status 与 状态颜色不匹配 展示的情况，改为支持 自定义颜色 -->
          <span :style="{ color: item.customColor }">{{ item.label }}</span>
        </template>
        <template slot="description">
          <div class="info">
            <p v-if="!item.state && item.time">{{ item.time }}</p>
            <p v-if="item.state">{{ item.state }}</p>
          </div>
          <div v-if="index < labelLsit.length - 1" class="spec-icon">
            <i class="iconfont icon-a-zu1087" />
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
  <!-- 合并备份 -->
  <!--  <div>
    &lt;!&ndash; {{processStatus}}
    {{active}} &ndash;&gt;
    <el-steps :active="active" finish-status="success" align-center>
      <el-step
        :title="item.label"
        :icon="item.icon"
        :description="item.time ? item.time : item.state"
        v-for="(item, index) in labelLsit"
        :key="index"
        :status="item.processStatus"
      ></el-step>
    </el-steps>
  </div>-->
</template>

<script>
  import findIndex from 'lodash/findIndex'
  export default {
    props: {
      label: {
        type: Array,
        default: () => []
      },
      status: {
        type: String,
        default: ''
      },
      active: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        v_index: 0,
        labelLsit: [],
        statusObj: {
          pass: '#409EFF',
          success: '#19972d',
          error: '#666666',
          danger: '#FF0000'
        }
      }
    },
    watch: {
      status: {
        handler() {
          this.init()
        },
        immediate: true
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      change(v, index) {
        this.$emit('changeStep', v.status, index)
      },
      init() {
        this.labelLsit = this.label
        var ary = this.label
        this.v_index = findIndex(this.labelLsit, { status: this.status })
        for (let i = 0; i < ary.length; i++) {
          if (i <= this.v_index) {
            if (this.$checkIsEmpty(ary[i].customColor)) {
              ary[i].color = this.statusObj[ary[i].processStatus] || '#409EFF'
            }
          } else {
            ary[i].color = ''
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  $blue: #409EFF;
  $green: #19972d;
  $red: #d80000;
  .el-step {
    .el-step__main {
      .el-step__description .is-process {
        color: red;
      }
      .el-step__title .is-process {
        color: red;
      }
    }
  }
  .el-step__icon {
    width: 40px;
    height: 40px;
  }
  .el-step__head.is-process {
    border-color: red;
  }
  .el-step__description .is-process {
    color: red;
  }
  .el-step__title .is-process {
    color: red;
  }
</style>
